
<template>
  <div class="task-warp">
    <div class="common-details">
      <div class="index-top">
        <div class="inputBox">
          隐患任务
        </div>
      </div>
      <div class="container px-1">
        <customSearch ref="customSearch" placeholder="请输入检查计划名称" title="排查任务管理" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
        <div class="listInner">
          <div v-if="listData && listData.length>0" class="common_list">
            <div v-for="(item, index) in listData" :key="index" class="list_item" @click="item.checkTaskStatus !== '未下发' ? goToDetails(item) : ''">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    <span class="content_title_label">{{ item.checkTaskName }}</span>
                    <van-progress :percentage="item.taskSchedule" stroke-width="12" style="width: 3rem; display: block" />
                  </div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color2">&#xe8d5;</i>
                      <div class="label">所属年份：</div>
                      <div class="value">{{ item.years }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color7">&#xe725;</i>
                      <div class="label">任务下发状态：</div>
                      <div class="value ">{{ item.checkTaskStatus }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color4">&#xe685;</i>
                      <div class="label">下发时间：</div>
                      <div class="value ">{{ item.issueTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color1">&#xeab5;</i>
                      <div class="label">检查类型：</div>
                      <div class="value">{{ item.checkType }}
                      </div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe67a;</i>
                      <div class="label">计划检查日期：</div>
                      <div class="value ">{{ item.checkTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color5">&#xe700;</i>
                      <div class="label">检查组数量：</div>
                      <div class="value ">{{ item.teamNum }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color6">&#xe725;</i>
                      <div class="label">检查企业数量：</div>
                      <div class="value ">{{ item.companyNum }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color7">&#xe725;</i>
                      <div class="label">已完成检查数量：</div>
                      <div class="value ">{{ item.completeNum }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
        </div>
        <!-- 高级搜索框 -->
        <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%', background:'white' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
          <div class="pop-vertical-flex">
            <div class="pop-content">
              <template>
                <customPopCheckbox :list="selectOptionAll['环保-隐患检查类型']" :check-value.sync="form.checkType" title="检查类型" />
                <customPopCheckbox :list="selectOptionAll['环保-隐患任务排查状态']" :check-value.sync="form.checkTaskStatus" title="任务下发状态" />
                <custom-timer type="date" title="下发时间" :start.sync="form.startTime" :end.sync="form.endTime" :is-interval="true" :picker-title="'请选择下发时间'" />
              </template>
            </div>
            <div class="pop-bottom">
              <van-button type="default" @click="resetSuperSearch">清空</van-button>
              <van-button type="info" @click="handleSuperSearch">确认</van-button>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { dangersCompanyPlanList } from '@/api/commonPage/dangerTreatment'

export default {
  mixins: [commonList],
  data() {
    return {
      superSearch: false,
      form: {
        checkTaskName: '', // 检查计划名称
        checkType: '',
        checkTaskStatus: '',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10
      },
      pages: 0,
      total: 0,
      listData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      const { status, data } = await dangersCompanyPlanList(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    },
    // customSearch输入框查询
    handleSearch(value) {
      this.form.checkTaskName = value
      this.form.pageNum = 1
      this.listData = []
      this.getList()
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.getList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.getList()
    },
    // 重置高级查询
    resetSuperSearch() {
      const pageSize = this.form.pageSize
      const pageNum = this.form.pageNum
      Object.keys(this.form).forEach(val => {
        this.form[val] = ''
      })
      this.form.pageSize = pageSize
      this.form.pageNum = pageNum
    },
    goToDetails(item) {
      const { checkTaskId } = item
      this.$router.push({
        path: '/task/detail',
        query: { checkTaskId }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.task-warp  {
  height: 100%;
  .index-top {
    height: 90px;
    flex: 0 0 90px;
    margin-bottom: 0;
    background: #3f81ff;
    .inputBox {
      display: flex;
      align-items: center;
      justify-content: center;
      .iconfont {
        font-size: 32px;
        margin-left: 10px;
      }
    }
  }
  .container {
    padding: 20px;
    overflow-y: auto;
  }
}
</style>
